<template>
    <div class="isv-tab">
      <!-- 导航 -->
      <tz-breadcrumb :title='["数据", "代理商报表"]' :pathArr='[{"name": "数据"},{"name": "代理商报表", "url": ""}]'></tz-breadcrumb>

      <!-- 跳转组件 -->
      <!-- <tz-a title='测试' url='/store-enter-nalysis' cssStyle='color: blue;background: #fff;' :params='{id: 1}'></tz-a> -->

      <!-- 二维码组件 -->
      <!-- <tz-qrcode :data='"http://www.baidu.com"' :width='150'></tz-qrcode>
      <tz-qrcode :data='"http://www.baidu.com"' :width='150'></tz-qrcode> -->

      <!-- 搜索表单 -->
      <el-form :inline="true" :model="formInline" class="form" label-position="left" label-width="90px" >
        <el-row :gutter="0">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <div>
              <!-- 代理商名称 -->
              <el-form-item class="form-item" label="代理商名称">
                <el-input class="time" v-model="formInline.name" placeholder=""></el-input>
              </el-form-item>
              <!-- 代理商id -->
              <el-form-item class="form-item" label="代理商id">
                <el-input class="time" v-model="formInline.isvId" placeholder=""></el-input>
              </el-form-item>
              <!-- 时间选择 -->
              <el-form-item class="form-item" label="时间选择" style='margin-top: 15px;'>
                <el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change='timeChange'></el-date-picker>
              </el-form-item>
              <el-form-item  class="form-item" style='margin-top: 15px;'>
                <el-col native-type='submit' :xs="12" :sm="12" :md="12" :lg="24" :xl="24">
                    <el-button type="primary" size='medium'>搜索</el-button>
                </el-col>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!-- 搜索结果 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="" label="代理商名称">
          <template slot-scope="scope">
            <span>天择网络</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="代理商ID">
          <template slot-scope="scope">
            <span>001</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="总成交额">
          <template slot-scope="scope">
            <span>60000.00</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="总成交笔数">
          <template slot-scope="scope">
            <span>1251</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="普通收款">
          <template slot-scope="scope">
            20000.00<span class="pay-number">(共111笔)</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="预授权收款">
          <template slot-scope="scope">
            20000.00<span class="pay-number">(共111笔)</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="银行卡收款">
          <template slot-scope="scope">
            20000.00<span class="pay-number">(共111笔)</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-download" plain>下载</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>

<script>
import { msToDate } from './../../controller/common';
// import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
// import tzA from './../../components/tz-a/tz-a.vue';
export default {
  // components: {
  //   'tz-breadcrumb': tzBreadcrumb,
  //   'tz-a': tzA
  // },
  data () {
    return {
      // 表单数据
      formInline: {
        startTime: '',
        endTime: '',
        name: '',
        isvId: ''
      },
      time: [],
      tableData: [{}, {}, {}, {}]
    };
  },
  methods: {
    timeChange (val) {
      // 日期空间确定时触发
      this.formInline.startTime = msToDate(val[0]);
      this.formInline.endTime = msToDate(val[1]);
    }
  }
};
</script>

<style lang="stylus" scoped>
.isv-tab
  .form
    padding: 2rem
    margin-top: 15px
    margin-bottom: 12px
    box-sizing: border-box
    background: #fff
    box-shadow: 1px 1px 1px #999
    .form-item
      display: inline-block
      margin-right: 35px
      margin-bottom: 0
      .time
        width: 200px
  .pay-number
    color: #ff4400
    margin-left: 5px
</style>
